// out: ../css/

// 导入初始化样式
@import 'base.less';
@vw: 3.75vw;

body {
    position: relative;
}

// header
header {
    padding: 0 (12/@vw) 0 (18/@vw);
    height: (44/@vw);
    .one {
        display: flex;
        line-height: (44/@vw);
        justify-content: space-between;
        .right {
            line-height: (44/@vw);
            span {
                color: #ccc
            };
            img {
                margin-bottom: (8/@vw);
                margin-left: (20/@vw);
            }
            .login {
                width: (24/@vw);
                height: (24/@vw);
            }
            .download {
                height: (24/@vw);
            }
        }
    }
    .one img {
        width: (66/@vw);
        height: (30/@vw);
        margin-top: (7/@vw);
    }
}

// tabbar
.tabbar {
    margin-top: (10/@vw);
    display: flex;
    border-bottom: 1px solid #ccc;
    ul {
        display: flex;
        margin-left: (12/@vw);
        li {
            margin-right: (22/@vw);
            padding-bottom: (8/@vw);
        }
        li:hover {
            border-bottom: 1px solid #ff6699;
            color: #ff6699;
        }
    }
    padding-right: (10/@vw);
}

// list
.list {
    padding: (10/@vw);
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    ul li {
        position: relative;
        margin-bottom: (32/@vw);
        p {
            font-size: (12/@vw);
            height: (17/@vw);
            width: (172.55/@vw);
            // overflow: hidden;
            max-lines: 2;
            text-overflow: ellipsis;
            line-height: (17/@vw);
            margin-top: (6/@vw);
        }
        img {
            width: (172.55/@vw);
            height: (97.05/@vw);
        }
        .play {
            width: (172.55/@vw);
            height: (97.05/@vw);
            position: absolute;
            padding: (10/@vw);
            justify-content: space-between;
            bottom: (23/@vw);
            display: flex;
            left: 0;
            background-image: linear-gradient(transparent,
          rgba(0, 0, 0, 0.5));
            .left, .right {
                display: flex;
                margin-top: (65/@vw);
                color: white;
                line-height: (16/@vw);
                div {
                    font-size: (12/@vw);
                    margin-left: (6/@vw);
                }
            }
        }
    }
}

// open
.open {
    background-color: #ff6699;
    margin: 0 (14/@vw);
    color: white;
    height: (38.2/@vw);
    width: (351/@vw);
    border-radius: (18/@vw);
    text-align: center;
    line-height: (38.2/@vw);
    position: fixed;
    bottom: (30/@vw);
    .text {
        margin-left: (14/@vw);
        font-size: (14/@vw);
    }
}

// final
.final {
    .more {
        text-align: center;
        margin-bottom: (20/@vw);
    }
    .four {
        text-align: center;
        font-size: (14/@vw);
        color: #838080;
        background-color: #f4f4f4;
        padding-top: (20/@vw);
        padding-bottom: (20/@vw);
    }
}